<template>
    <div class="index">
        <pub-head isBorder="true" isIndex= 'true'></pub-head>
        

        <!-- 轮播图 -->
        <div class="swiper flex">
            <van-swipe :autoplay="3000" class="flex1" indicator-color="white">
                <van-swipe-item class="flex" v-for="(item, index) in banners" :key="index">
                    <img :src="item.content" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 分类 -->
        <div class="index-titles flex flex-wrap">
            <div exact class="index-title flexv flexc mt2" v-for="(item, index) in navs" :key="index" @click="none(index)">
            <!-- <d :to="item.lian" exact class="index-title flexv flexc mt2" v-for="(item, index) in navs" :key="index"> -->
                <div class="title-img flex">
                    <img :src="item.img" alt="">
                </div>
                <p class="title-name">{{item.name}}</p>
            </div>
        </div>

        <!-- 资讯 -->
        <div class="index-news flexv">
            <div class="index-news-head ali-c flex jus-b">
                <span class="index-news-name">建筑资讯</span>
                <router-link :to="'/newsList'" class="index-news-more">查看更多</router-link>
            </div>
            <ul class="flexv">
                <li class="flex" v-for="item in articles" :key="item.id">
                    <router-link :to="'/newsDetail/' + item.id" class="flex1 flex">
                        <div class="news-sign">最新</div>
                        <div class="news-box flex1 flexv">
                            <p class="twoline">{{item.title}}</p>
                            <span class="news-time">{{timestampToTime(item.add_time)}}</span>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>

        <!-- 底部占位符 -->
        <div class="pub-foot-seat mt2"></div>

        <!-- 底部 -->
        <pub-foot index="true"></pub-foot>
    </div>
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'
import { Swipe, SwipeItem, Toast } from 'vant';
Vue.use(Swipe).use(SwipeItem).use(Toast);
    export default {
        name: "Index",
        components: {
            pubHead,
            pubFoot
        },
        data() {
            return {
                banners: null, // 轮播图
                navs: [], // 主题
                articles: [], //建筑资讯列表
            }
        },
        created() {
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Index&a=index',{
                params: {
                    uid: this.$store.state.user.uid
                }
            }).then(res => {
                if(res.status == 200){
                    const data = res.data.data;
                    this.banners = data.ad;
                    this.navs = data.nav;
                    this.articles = data.article;
                }
            })
        },
        computed: {
            ...mapState(['user'])
        },
        methods: {
            none(index){
                if (this.navs[index].lian) {
                    this.$router.push(this.navs[index].lian)
                }else{
                    Toast({
                        duration: 2000,
                        message: '暂未开放~'
                    })
                }
            },
            // 时间转换
            timestampToTime(timestamp) {
                var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                // var D = date.getDate() + '- ';
                // var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                // var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                // var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
                return Y+M+D;
                // return Y+M+D+h+m+s;
            },
        }
    }
</script>

<style lang="less" scoped>
.index {
    background-color: #f5f5f5;
    .swiper{
        width: 100%;
        max-width: 750px;
        height: 4.2rem;
    }
    // 分类
    .index-titles {
        padding: 0.34rem 0.24rem;
        background-color: #fff;
        .index-title {
            width: 25%;
            height: auto;
            .title-img {
                width: 1.05rem;
                height: 1.05rem;
                margin: auto;
            }
            .title-name {
                margin-top: 0.16rem;
                font-size: 0.26rem;
                color: #333;
            }
        }
    }
    // 资讯
    .index-news {
        margin-top: 0.2rem;
        background-color: #fff;
        border-top: 1px solid #dbdbdb;
        .index-news-head {
            width: 100%;
            height: 0.84rem;
            padding: 0 0.24rem;
            .index-news-name {
                height: 0.3rem;
                padding-left: 0.1rem;
                border-left: 0.06rem solid #333;
                font-size: 0.3rem;
                line-height: 0.3rem;
                font-weight: bold;
                color: #333;
            }
            .index-news-more {
                padding-right: 0.2rem;
                background: url(~@/assets/to.png) no-repeat right center;
                background-size: 0.12rem 0.24rem;
                font-size: 0.24rem;
                line-height: 120%;
                color: #999;
            }
        }
        // 列表
        ul {
            width: 100%;
            padding: 0 0.24rem;
            border-top: 1px solid #dbdbdb;
            li {
                width: 100%;
                min-height: 1.45rem;
                padding: 0.3rem 0;
                border-bottom: 1px solid #e8e8e8;
                .news-sign {
                    width: 0.7rem;
                    height: 0.35rem;
                    margin-right: 0.1rem;
                    font-size: 0.24rem;
                    line-height: 0.35rem;
                    text-align: center;
                    color: #fff;
                    background-color: #fe9805;
                }
                p {
                    font-size: 0.28rem;
                    line-height: 150%;
                    color: #333;
                }
                .news-time {
                    margin-top: 0.06rem;
                    font-size: 0.22rem;
                    text-align: right;
                    line-height: 120%;
                    color: #999;
                    display: block;
                }
            }
            li:last-child {
                border-bottom: none;
            }
        }
    }
    .pub-foot-seat {
        width: 100%;
        height: 0.98rem;
    }
}
</style>